<template>
  <div>
    <!-- 头部 -->
    <div id="seaS">
      <div class="on">
        <span class="iconfont" @click="$router.go(-1)">&#xe6bc;</span>
        <h2>小U商城</h2>
        <p>
          <span class="iconfont">&#xf0112;</span>
          <i></i>
          <span class="iconfont">&#xe71e;</span>
        </p>
      </div>
      <!-- 搜索和导航 -->
      <div id="sectionS">
        <!-- 上 -->
        <div class="top">
          <span class="iconfont">&#xe613; </span>
          <h1>
            <img src="../assets/images/logo.jpg" alt="" />
          </h1>
          <input
            type="text"
            class="iconfont"
            placeholder="按内容搜索"
            v-model="key"
            @keyup="keydown"
          />
          <span class="iconfont">&#xe663;</span>
        </div>
        <!-- 下 -->
        <div class="under">
          <span
            >综合推荐
            <i></i>
          </span>
          <nav>
            <a href="#">销量</a>
            <a href="#">价格</a>
            <a href="#">好评度</a>
            <a href="#">店铺</a>
          </nav>
          <p><span class="iconfont">&#xe611;</span>筛选</p>
        </div>
      </div>
    </div>
    <!-- 头部结束 -->
    <div id="mainS">
      <div class="top">
        <p>筛选11.11大促商品</p>
      </div>
      <div class="under">
        <ul>
          <!-- 商品1 -->
          <li
            class="li1"
            @click="goDetail(item.id)"
            v-for="item in goodslist"
            :key="item.id"
          >
            <img :src="item.img" alt="" />
            <div class="right">
              <span class="s1">{{ item.goodsname }}</span>
              <p>
                <span
                  >￥<span>{{ item.price }}</span></span
                >
                <span>￥{{ item.market_price }}</span>
                <span>999人已付款</span>
              </p>
              <span class="s3">11.11限时299元起</span>
              <i>999条评论<span>99.9%好评</span></i>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
//引入
import { search } from "../request/api";
export default {
  data() {
    return {
      goodslist: [],
      key: "",
    };
  },
  mounted() {
    search({
      keywords: this.$route.params.keywords,
    }).then((res) => {
      console.log(res, "搜索商品");
      if (res.data.code == 200) {
        this.goodslist = res.data.list;
      }
    });
  },
  methods: {
    keydown() {
      search({
        keywords: this.key,
      }).then((res) => {
        console.log(666);
        if (res.data.code == 200) {
          this.goodslist = res.data.list;
        }
      });
    },
    //点击跳转到详情页
    goDetail(id) {
      console.log(this.$router, "去详情页");
      this.$router.push("/detail/" + id);
    },
  },
};
</script>

<style scoped>
@import '../assets/css/search.css';
</style>
